<template>
    <div class="voucher-cell-layout">
        <div  v-for="(item,index) in voucherAr" style="  height: 100px;
        border-bottom: 1px solid #e1e1e1;">
            <div class="voucher-list-partcell">
                <div>
                    <p v-if="item.name.length>28" class="vouchercell-title" >{{item.name.substring(0,28)}}...</p>

                    <p v-else class="vouchercell-title" >{{item.name}}</p>
                    <p class="vouchercell-description" >{{item.description}}</p>
                </div>
                <div>
                    <div class="numbercell">
                        <!--////0 是灰色#cccece 1 是办公用品 #e9b778 2 是凭证请领 #83d16f-->
                        <!--this.$emit('getspinnernumer',{'amounts':this.counter,'index':this.index}); //主动触发selectHead方法，'123'为向父组件传递的数据-->

                        <VouvherSpiner :index="index" max="500" min="0" unit="1" :amounts=item.amounts  @getspinnernumer="getspinnernumer"  width="80px" height="30px" >{{item.amounts}}</VouvherSpiner>
                        <!--<Spinner  type="2" :index="index" max="500" min="0" unit="1" :amounts=item.amounts  @addnumberclick="addnumberclick"-->
                                  <!--@minusnumberclick="minusnumberclick"  width="80px" height="30px" >{{item.amounts}}</Spinner>-->
                    </div>

                </div>
            </div>

        </div>
    </div>

</template>

<script>
    // import Spinner from "@/components/spinner.vue";
    import VouvherSpiner from "@/components/vouvherSpiner.vue";


    export default {
        name: "voucherCellComponent",

        data() {
            return {
                selectList:[],
            }
        },
        props: {
            voucherAr: {
                type: Array,
                default() {
                    return []
                }
            },
        },
        watch: {
            voucherAr: {
                //注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象
                handler(newValue, oldValue) {

                },
                deep: true
            },

            selectList:{
                //注意：当观察的数据为对象或数组时，curVal和oldVal是相等的，因为这两个形参指向的是同一个数据对象
                handler(newValue,oldValue){

                    console.log('chuanzhi');
                    console.log(newValue);
                    this.$emit('selectdata',newValue); //主动触发selectHead方法，'123'为向父组件传递的数据

                },
                deep:true
            },



        },
        components: {
            VouvherSpiner
        },
        created()
        {

            this.selectList=JSON.parse(localStorage.getItem('voucher'));


        },
        methods:
        {
            getspinnernumer(data)
            {
                console.log('大加减');
                console.log(data);

                this.selectList=JSON.parse(localStorage.getItem('voucher'));

                console.log(this.selectList);
                if (this.selectList.length === 0) {
                    var dic = this.voucherAr[data.index];
                    dic['amounts'] = data.amounts;
                    this.selectList.push(dic);
                } else {
                    var z = 0;
                    var dic = this.voucherAr[data.index];
                    dic['amounts'] = data.amounts;
                    for (var j = 0; j < this.selectList.length; j++) {
                        if (String(this.selectList[j].uuid) == String(this.voucherAr[data.index].uuid)) {
                            //新数据替换旧数据
                            console.log('相同');
                            this.selectList.splice(j, 1, dic);
                            z++;

                        }
                    }
                    if (z == 0) {
                        //没有相同的 增加不相同的数据添加数据
                        this.selectList.push(dic);

                    }
                }
                localStorage.setItem('voucher',JSON.stringify
                (this.selectList));
                console.log(this.selectList);



            }
        }

        //     addnumberclick(data)
        //     {
        //
        //         if (this.selectList.length ===0) {
        //             var dic=this.voucherAr[data.index];
        //             dic['amounts'] = data.amounts;
        //             this.selectList.push(dic);
        //         }else
        //         {
        //             var  z=0;
        //             var dic=this.voucherAr[data.index];
        //             dic['amounts'] = data.amounts;
        //             for (var j=0;j<this.selectList.length;j++) {
        //                 if (String(this.selectList[j].uuid)== String(this.voucherAr[data.index].uuid))
        //                 {
        //                     //新数据替换旧数据
        //                     z++;
        //                     // console.log('相同');
        //                     this.selectList.splice(j,1,dic);
        //                 }
        //             }
        //             if (z==0)
        //             {
        //                 //没有相同的 增加不相同的数据添加数据
        //                 this.selectList.push(dic);
        //
        //             }
        //         }
        //     },
        //     minusnumberclick(data)
        //     {
        //
        //             if (this.selectList.length ===0) {
        //
        //                 console.log('===');
        //
        //             }else
        //             {
        //                 for (var j=0;j<this.selectList.length;j++) {
        //                     var dic=this.voucherAr[data.index];
        //                     dic['amounts'] = data.amounts;
        //                     if (String(this.selectList[j].uuid)== String(this.voucherAr[data.index].uuid))
        //                     {
        //
        //                         this.selectList.splice(j,1,dic);
        //                     }
        //                 }
        //             }
        //
        //     }
        //
        // }

    }
</script>

<style lang="scss">
    .voucher-cell-layout {
        width: 100%;
        .voucher-list-partcell {
            display: flex;
            width: 100%;
            /*align-items: center;*/
        }

        .vouchercell-title {
            color: #464646;
            font-size: 1.2em;
            text-align: left;
            padding-left: 20px;
            padding-top: 15px;
            padding-right: 3rem;
        }

        .vouchercell-description {
            color: #b1b1b1;
            font-size: 1.2em;
            text-align: left;
            padding-left: 20px;
            width: 100%;
            padding-top: 10px;

        }
        .numbercell {
            padding-right: 20px;
            padding-top: 20px;
            width: 2rem;
            position: absolute;
            right: 0px;
        }
    }

</style>